<template>
<div
  @dragenter.prevent
  @dragover.prevent
  @drop="onDrop($event, 1)"
  class="drop-zone"><div v-for="item in getList(1)"
  :key="item.id"
  draggable="true"
  @dragstart="startDrag($event, item)"
  class="drag-el">{{ item.title }}</div></div>
  <div
  @dragenter.prevent
  @dragover.prevent
  @drop="onDrop($event, 2)"
  class="drop-zone"
><div v-for="item in getList(2)"
  :key="item.id"
  draggable="true"
  @dragstart="startDrag($event, item)"
  class="drag-el">{{ item.title }}</div></div>
</template>

<style scoped>
  .drop-zone {
    background-color: rgb(155, 155, 155);
    margin-bottom: 10px;
    padding: 10px;
    margin: 50px auto;
    min-height: 10px;
  }
  .drag-el {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;
    margin-bottom: 10px;
  }
  .drag-el:nth-last-of-type(1){
    margin-bottom: 0;

  }
  </style>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 0, title: 'Item A', list: 1, },
  { id: 1, title: 'Item B', list: 1, },
  { id: 2, title: 'Item C', list: 2, },
])

const getList = (list) => {
  return items.value.filter((item) => item.list == list)
}

const startDrag = (event, item) => {
  event.dataTransfer.dropEffect = 'move'
  event.dataTransfer.effectAllowded = 'move'
  event.dataTransfer.setData('itemID', item.id)
}

const onDrop = (event, list) => {
  const itemID = event.dataTransfer.getData('itemID')
  const item = items.value.find((item) => item.id == itemID)
  item.list = list
}
</script>
